<template>
    <div class="container-vip">
      <div class="header-container">
        <div class="content">
          <p>会员专区</p>
          <div class="content-code">
            <div class="content-out">
               <div>
                 <img class="user-png" src="../Vip_zone/images/default_head@3x.png">
               </div>
                <div class="vip-login">
                  <div class="login">登录</div>
                  <div class="vip">会员登录尊享10大特权</div>
                </div>
                <div class="video-code">
                  <img class="video-png" src="../Vip_zone/images/teach_video_free.png">
                  <p class="class-study">以下743个会员专区课程 全部免费学习</p>
                </div>
                <div class="delete-vip">
                  <img class="delete-png" src="../Vip_zone/images/member_preferential.png">
                  <p class="vip-study">购买非会员专区课程 可获会员立减优惠</p>
                </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  <DanceDetails></DanceDetails>
  <SortComponents></SortComponents>
  <VideoSingle></VideoSingle>
</template>
<script lang="ts">
import { defineComponent } from "vue"
export default defineComponent({
    name: "Vip_zone"
})
</script>
<script lang="ts" setup>
import {storeToRefs} from "pinia";
import DanceDetails from "@/components/DanceDetails/index.vue";
import SortComponents from "@/components/SortComponents/index.vue";
import VideoSingle from "@/components/VideoSingle/index.vue";
import {useLiveStore} from "@/store/modules/live";
import {onMounted} from "vue";
const LiveStore = useLiveStore()
const {isLoading} = storeToRefs(LiveStore)
const {getSelectList} = LiveStore
onMounted(async ()=>{
    await getSelectList()
})
</script>
<style lang="scss" scoped>
.container-vip{
     display: flex;
     justify-content: center;
     align-items: center;

     background: #f5f7f9;
     min-width: 1200px;
     .header-container{
       border-radius: 4px;
       background: #fff;
       margin: 5px auto;
       width: 1200px;
       height: 140px;
       display: flex;
       justify-content: center;
       align-items: center;
       .content{
          p{
            margin-top: 10px;
            margin-left: 20px;
            margin-bottom: 20px;
          }
         .content-out{
           min-width: 1140px;
           display: flex;
           justify-content: left;
           height: 60px;
           .user-png{
             width: 50px;
             height: 50px;
             margin-left: 20px;
             margin-right: 10px;
             border-radius: 50%;
           }
           .vip-login{
             border-right: 1px solid #dee2e6;
             padding-right: 100px;
             height: 58px;
             .vip{
               margin-top: 5px;
               font-size:12px;
               color: #f93684;
             }
             .login{
               margin-top: 5px;
             }
           }

           .video-code{
              width: 430px;
             display: flex;
             justify-content: center;
             align-items: center;
             .video-png{
               width: 58px;
               height: 58px;
               margin-right: 30px;
             }
             .class-study{
               width: 173px;
               margin: 16px 0;
               display: inline-block;
               vertical-align:middle;
             }
           }
           .delete-vip{
             width: 430px;
             display: flex;
             justify-content: center;
             align-items: center;
             .delete-png{
               width: 58px;
               height: 58px;
               margin-right: 30px
             }
             .vip-study{
               width: 173px;
               margin: 16px 0;
               display: inline-block;
               vertical-align:middle;
             }

           }
         }
       }
    }
}


</style>
